<template>
  <div class="creditLevel-container">
    <div class="title">诚信评价等级分布</div>
    <div id="creditLevel" class="creditLevel"></div>
  </div>
</template>
<script>
export default {
  name: 'creditLevel',
  data() {
    return {
      levelData: [
        {
          name: 'A',
          value: 0,
        },
        {
          name: 'B',
          value: 0,
        },
        {
          name: 'C',
          value: 0,
        },
      ],
    }
  },
  mounted() {
    this.draw('creditLevel')
  },
  methods: {
    draw(id) {
      this.creditLevelChart = echarts.init(document.getElementById(id))
      this.creditLevelChart.setOption({
        color: ['#6FFDB5', '#0079FC', '#FCB437'],
        tooltip: {
          trigger: 'item', //饼图悬浮提示
        },
        series: [
          {
            name: '违法记载',
            type: 'pie',
            radius: '60%',
            center: ['50%', '50%'],
            label: {
              show: true,
              lineHeight: 20,
              formatter: function (item) {
                const { name, value } = item.data
                return `{dot${name}|}  ${name} : ${value}% \n`
              },
              padding: [0, -60],
              position: 'outside',
              rich: {
                dotA: {
                  width: 8,
                  height: 8,
                  backgroundColor: '#6FFDB5',
                },
                dotB: {
                  width: 8,
                  height: 8,
                  backgroundColor: '#0079FC',
                },
                dotC: {
                  width: 8,
                  height: 8,
                  backgroundColor: '#FCB437',
                },
              },
            },
            labelLine: {
              show: true,
              length2: 60,
            },
            data: this.levelData,
          },
        ],
      })
      window.addEventListener('resize', () => {
        this.creditLevelChart.resize()
      })
    },
  },
}
</script>

<style lang="less" scoped>
.creditLevel-container {
  width: 100%;
  height: calc(100% - 52px);
  .title {
    text-align: center;
    font-size: 14px;
    line-height: 16px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #fefefe;
  }
  .creditLevel {
    height: calc(100% - 28px);
    margin-top: 10px;
  }
}
</style>
